<template>
  <div class="box">
    <div class="search">
      <div class="cx">
        <span class="a">筛选查询</span>
        <span class="b" @click="search">查询结果</span>
      </div>
      <div class="search_type">
        <div>
          报销人：<input type="text" placeholder="输入姓名" v-model="name">
        </div>
      <div style="margin-left:200px">  报销类型：<select name="" id="">
          <option value="打车">招待费</option>
          <option value="餐费">餐费</option>
          <option value="打车">打车</option>
          <option value="其他">其他</option>
        </select></div>
     <div style="margin-left:200px">
       
      报销状态：<select name="" id="">
        <option value="未报销">未报销</option>
          <option value="已报销">已报销</option>
          
        </select>
     </div>
      </div>
    </div>
    <div class="top">
      <div class="detail">
        <span style="margin-left:10px">数据列表</span>
        <span class="add" @click="add">新增</span>
      </div>
    </div>
    <div class="money">
      <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="序号" width="180" />
      <el-table-column prop="type" label="报销类型" width="180" />
      <el-table-column prop="money" label="金额" width="180" />
      <el-table-column prop="name" label="报销人" width="180" />
      <el-table-column prop="stus" label="状态" width="180"  />
      <el-table-column prop="date" label="日期" width="180" />
      <el-table-column prop="cz" label="操作">
        <template #default="scope"> 
          <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">删除</el-button>
          <el-button link type="primary" size="small" @click.prevent="editRow(scope.row)">修改</el-button>
          <el-button link type="primary" size="small" @click.prevent="queryRow(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="100"   :current-page="formJsonIn.page"
      @size-change="handleSizeChange"  v-model:currentPage="formJsonIn.page"
      :page-size="formJsonIn.page_size"
      :page-sizes="[10, 20, 30, 40, 50]"  />
      
    </div>
  </div>
  </template>
  <script setup>
  
  import axios from "axios"
  import { onMounted, ref } from "vue";
  import { useRouter } from 'vue-router'
  var router = useRouter()
  
  var list = ref([])
  
  var name = ref("")
  
  var formJsonIn = ref({
      page: 1,
      page_size: 10
  })
  onMounted(() => {
    axios.get("/api/user_money/list").then((res) => {
    // console.log(res.data.list);
    list.value=res.data.list
  })
  })
  
  //定义函数
  
  // 选择每页多少条
  //  const handleSizeChange = row => {
  //     formJsonIn.value.page_size = row
  //     formJsonIn.value.page = 1
  //     getlist()
  // }
  // // 点击页面进行跳转
  // const handleCurrentChange = row => {
  //     formJsonIn.value.page = row
  //     getlist()
  // }
  
  
  //跳详情
    var queryRow =((row) => {
    // axios.get("'/api/user_money/detail'")
      router.push(
      {path:"/index/detail",query:row}
      )
      // console.log(row);
      // console.log(JSON.stringify(row));
  
  })
  //删除
  var deleteRow = (row) => {
    axios.post("/api/user_money/delete", { id: row.id }).then((res) => {
  
      console.log(res.data);
      list.value = res.data.list;
   alert("删除成功！")
   });
  };
  
  //修改
  var editRow = (row) => {
    router.push("/index/change" + JSON.stringify(row))
    
  }
  
  //增加
  var add = () => {
    router.push("/index/personadd")
    
  }
  
  //查询
  var search = () => { 
    router.push("/index/search_person"+JSON.stringify(name.value))
    // router.push({
    //   path: "/index/search_person",
    //   query:name.value
    // })
  }
  
  </script>
  
  <style lang="scss">
  
  .box{
    border: 1px solid #e4e4e4;
    .search{
      width: 100%;
      height: 120px;
      background: #e4e4e4;
      margin-bottom: 50px;
      font-size: 14px;
      .cx{
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 50px;
        .a{
          margin-left: 10px;
        }
        .b{
          width: 70px;
        height: 52px;
        background: #f2f2f2;
        text-align: center;
        cursor: pointer;
        color: #63c8e0;
        }
      }
      .search_type{
        display: flex;
      align-items: center;
      background: white;
      height: 70px;
      border-bottom: 1px solid #e4e4e4;
      div{
        margin-left: 10px;
        input{
        width: 100px;
        height: 40px;
        border: none;
        outline: none;
        border: 1px solid #e4e4e4 ;
      }
      }
     
      }
    }
  }
  .top{
    width: 100%;
    height: 50px;
    background: #e4e4e4;
    font-size: 14px;
    .detail{
      display: flex;
      justify-content: space-between;
      height: 50px;
      line-height: 50px;
      .add{
        width: 70px;
        height: 50px;
        background: #f2f2f2;
        text-align: center;
        cursor: pointer;
        color: #63c8e0;
      }
      
    }
  }
  
  </style>